<template>
  <li class="todo-item" :style="{ backgroundColor }">
    <label class="cute-checkbox">
      <input type="checkbox" :checked="done" @change="handleChange" />
      <span class="checkmark"></span>
    </label>
    <span
      v-if="!isEditing"
      @click="isEditing = true"
      :class="done ? 'deleted' : ''"
      class="todo-content"
      >{{ content }}</span
    >
    <input
      v-else
      v-focus
      type="text"
      :value="content"
      @blur="handleEdit"
      @keyup.enter="handleEdit"
      class="edit-input"
    />
    <button @click="handleDelete" class="cute-btn">删除</button>
  </li>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
  done: {
    type: Boolean,
    required: true,
  },
  backgroundColor: {
    type: String,
    default: 'transparent',
  },
})
const emit = defineEmits(['toggle', 'edit', 'delete'])
// 在setup中, 使用v开头的变量, 当作是自定义的指令. 就是一个对象.
// 存在一个mounted函数, 这个函数会在组件被挂载到DOM上时执行.
const vFocus = {
  mounted(el) {
    // el就是v-focus指令绑定的元素
    el.focus()
  },
}

const isEditing = ref(false)

const handleChange = (event) => {
  // 通知App组件
  emit('toggle', props.id, event.target.checked)
}

const handleEdit = (event) => {
  isEditing.value = false
  // 触发edit事件, 将id,value传递给App组件
  emit('edit', props.id, event.target.value)
}

const handleDelete = () => {
  // 触发delete事件, 将id传递给App组件
  emit('delete', props.id)
}
</script>

<style scoped>
.todo-item {
  list-style: none;
  padding-inline: 40px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 10px;
  margin-bottom: 5px;
}

.todo-item:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.todo-content {
  flex: 1;
  margin: 0 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.todo-content:hover {
  color: #ff6b91;
}

.edit-input {
  flex: 1;
  margin: 0 20px;
  height: 30px;
  padding: 0 10px;
  border: 2px solid #ffb6c1;
  border-radius: 15px;
  outline: none;
  font-size: 16px;
}

/* 可爱风格的按钮 */
.cute-btn {
  padding: 6px 12px;
  background-color: #eef511;
  color: #c06c84;
  border: 2px solid #ffb6c1;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.cute-btn:hover {
  background-color: #ffb6c1;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cute-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* 可爱风格的复选框 */
.cute-checkbox {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.cute-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: #fff;
  border: 2px solid #ffb6c1;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.cute-checkbox:hover input ~ .checkmark {
  background-color: #f8e1e5;
}

.cute-checkbox input:checked ~ .checkmark {
  background-color: #ffb6c1;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.cute-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.cute-checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.deleted {
  text-decoration: line-through;
  color: #ff6b91;
  font-style: italic;
  opacity: 0.7;
}
</style>
